<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '新建小组',
    navigationStyle: 'custom',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar :title="'新建小组'" />
  <view class="container">
    <uni-forms class="form" ref="form" :modelValue="form" label-position="left">
      <uni-forms-item label="组头像" name="avatar">
        <view style="position: relative; left: 20%; align-items: center; text-align: center">
          <uni-file-picker
            ref="avaterPickerRef"
            :value="[{ name: form.groupName, extname: '', url: form.groupAvatar }]"
            limit="1"
            :del-icon="false"
            disable-preview
            :imageStyles="imageStyles"
            file-mediatype="image"
            @select="selectAvatar"
          ></uni-file-picker>
        </view>
      </uni-forms-item>
      <uni-forms-item label="组名" name="name">
        <uni-easyinput type="text" v-model="form.groupName" placeholder="请输入组名" />
      </uni-forms-item>
      <uni-forms-item label="小组口号" name="description">
        <uni-easyinput type="textarea" v-model="form.description" placeholder="请输入描述" />
      </uni-forms-item>
      <view class="bottom">
        <view class="submit" @click="submit">新建</view>
      </view>
    </uni-forms>
  </view>
</template>

<script lang="ts" setup>
import CustomNavbar from '@/components/CustomNavbar.vue'
import { useGroupStore } from '@/store/group'
import { Group } from '@/types/group'
import { addOrUpdateApi } from '@/service/group'
import { getEnvBaseUrl } from '@/utils'
const groupRef = useGroupStore()
let form = groupRef.group
// 小组头像
const imageStyles = {
  width: 120,
  height: 120,
}
const selectAvatar = (ev) => {
  const tmpAvatar = ev.tempFiles[0].image.location
  form.groupAvatar = tmpAvatar
}

const submit = async () => {
  console.log('form.value', form)
  const groupRes = await addOrUpdateApi(form)
  form = groupRes.data
  const baseUrl = getEnvBaseUrl()
  uni.showLoading({ title: '修改中...' })
  const res = await uni.uploadFile({
    url: baseUrl + '/file/upload', // 仅为示例，非真实的接口地址
    filePath: form.groupAvatar,
    name: 'file',
    formData: {
      type: 3,
      param: JSON.stringify(form),
    },
  })
  form.groupAvatar = JSON.parse(res.data).data
  groupRef.groupList.push({ ...groupRes.data })
  groupRef.clearGroup()
  uni.hideLoading()
  uni.navigateBack()
  uni.showToast({ icon: 'none', title: '添加成功' })
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 90%;
  padding: 30rpx;
  margin-top: 30rpx;
}
.form {
  background-color: #ffffff;
}
.bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  margin-top: 70rpx;
  > .submit {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    background: $main-color;
  }
}
</style>
